import React from 'react'

class FormDemo extends React.Component {
    constructor(props) {
        super(props)
        this.state = { 
            name: 'ionluo',
            info: 'xxxxxxxxxxxxxxxxxxxx',
            city: 'guangzhou',
            flag: true,
            gender: 'male'
         }
    }
    render() {
        // 受控组件
        return <div>
            <h3>表单</h3>
            <form>
                <p>
                    <label htmlFor="inputName">姓&emsp;&emsp;名</label> {/* htmlFor 代替 for */}
                    <input id='inputName' value={this.state.name} onChange={this.onInputChange} />
                    （{this.state.name}） 
                </p>
                <p>
                    <label htmlFor="inputInfo">个人信息</label> {/* htmlFor 代替 for */}
                    <textarea id='inputInfo' value={this.state.info} onChange={this.onTextareaChange} />
                    （{this.state.info}） 
                </p>
                <p>
                    <label htmlFor="inputCity">城&emsp;&emsp;市</label> {/* htmlFor 代替 for */}
                    <select id='inputCity' value={this.state.city} onChange={this.onSelectChange}>
                        <option value="beijing">北京</option>
                        <option value="shanghai">上海</option>
                        <option value="guangzhou">广州</option>
                    </select>
                    （{this.state.city}） 
                </p>
                <p>
                    <label htmlFor="inputFlag">已关注&emsp;</label> {/* htmlFor 代替 for */}
                    <input id='inputFlag' type="checkbox" checked={this.state.flag} onChange={this.onCheckboxChange}/>
                    （{this.state.flag.toString()}）  {/* 注意不转成string无法打印 */}
                </p>
                <p>
                    <label>性&emsp;&emsp;别</label>
                    <input type="radio" namne="gender" value="male" checked={this.state.gender === 'male'} onChange={this.onRadioChange}/> male
                    <input type="radio" namne="gender" value="female" checked={this.state.gender === 'female'} onChange={this.onRadioChange}/> female
                    （{this.state.gender}） 
                </p>
            </form>
        </div>
    }
    onInputChange = (e) => {
        this.setState({
            name: e.target.value
        })
    }
    onTextareaChange = (e) => {
        this.setState({
            info: e.target.value
        })
    }
    onSelectChange = (e) => {
        this.setState({
            city: e.target.value
        })
    }
    onCheckboxChange = () => {
        this.setState({
            flag: !this.state.flag
        })
    }
    onRadioChange = (e) => {
        this.setState({
            gender: e.target.value
        })
    }
}

export default FormDemo